<template>
<div class="pdf">
<el-row :gutter="20">
  <el-col :span="12"><div class="grid-content bg-purple">
      操作栏
  </div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple">
    <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">
      <div class="pdf-tab">
        <div 
          class="btn-def btn-pre"
          @click.stop="prePage">上一页</div>
        <div 
          class="btn-def btn-next"
          @click.stop="nextPage">下一页</div>
        <div 
          class="btn-def"
          @click.stop="pdfPrintAll">全部打印</div>
      </div>
    </div></el-col>
    <el-col :span="18"><div class="grid-content bg-purple">
      <pdf 
        ref="pdf"
        :src="pdfUrl"
        :page="pageNum"
        @password="password"
        @num-pages="pageTotalNum=$event" 
        @error="pdfError($event)"
        @link-clicked="page = $event">
      </pdf>
    </div></el-col>
    </el-row>    
  </div></el-col>
</el-row>

<el-row :gutter="20">
  <el-col :span="12"><div class="grid-content bg-purple">
      操作栏
  </div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple">
    <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple">
      <div class="pdf-tab">
        <div 
          class="btn-def btn-pre"
          @click.stop="prePage">上一页</div>
        <div 
          class="btn-def btn-next"
          @click.stop="nextPage">下一页</div>
        <div 
          class="btn-def"
          @click.stop="pdfPrintAll">全部打印</div>
      </div>
    </div></el-col>
    <el-col :span="18"><div class="grid-content bg-purple">
      <pdf 
        ref="pdf"
        :src="pdfUrl"
        :page="pageNum"
        @password="password"
        @num-pages="pageTotalNum=$event" 
        @error="pdfError($event)"
        @link-clicked="page = $event">
      </pdf>
    </div></el-col>
    </el-row>    
  </div></el-col>
</el-row>
  
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"../../static/first.pdf",
          pageNum:1,
      pageTotalNum:1,
      }
  },
  mounted: function() {
  },
  methods: {
    prePage(){
      var p = this.pageNum
      p = p>1?p-1:this.pageTotalNum
      this.pageNum = p
    },
    nextPage(){
      var p = this.pageNum
      p = p<this.pageTotalNum?p+1:1
      this.pageNum = p
    },
    password(updatePassword, reason) {
      updatePassword(prompt('password is "123456"'))
      console.log('...reason...')
      console.log(reason)
      console.log('...reason...')
    },
    pdfError(error){
      console.error(error)
    },
     pdfPrintAll(){
      this.$refs.pdf.print()
    },
  }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>